/* eslint-disable no-unused-vars */
/* eslint-disable no-undef */
async function content() {
    let res = await ajaxFn({
        baseUrl:
            'https://service-dmsf9bxc-1251395798.gz.apigw.tencentcs.com/release/',
        url: '/api/web/classify/getById',
        method: 'GET',
        data: {
            id: 23,
            projectId: 22,
        },
        headers: {
            'Content-type': 'application/json',
        },
    });
    // console.log(res.data.w_cases);
    let content = document.querySelector('.content');
    let data = res.data.w_cases;
    let title = res.data;
    let innerStr = '';
    content.innerHTML += `<div class="content-head">
        <span>${title.name}</span>
        <ul class="content-dots">
            <li class="liNature active" data-index = "0"></li>
            <li  class="liNature" data-index = "1"></li>

        </ul>
        <div class="more">
            <span>更多&gt;</span>
        </div>
    </div>
    <ul class="content-botton"></ul>
    `;

    data.forEach((item, index) => {
        // console.log(item);

        let dateString = item.updatedAt;
        let dateObj = new Date(dateString);
        let year = dateObj.getFullYear();
        let month = ('0' + (dateObj.getMonth() + 1)).slice(-2);
        let day = ('0' + dateObj.getDate()).slice(-2);
        let formattedDate = year + '年' + month + '月' + day + '日';

        innerStr += `<li class="img">
        <img src="${item.cover}">
        <div class="message">
            <div class="title">${item.characterId}</div>
            <div class="phone">设备：<a href="#">${item.sketch}</a></div>
            <span>273</span>
            <div class="user">
                ${item.content.substring(
                    item.content.indexOf('<img'),
                    item.content.indexOf('>', item.content.indexOf('<img')) + 1
                )}
                <span class="name">${item.name}</span>
                <div class="time">${formattedDate}</div>
            </div>
        </div>
    </li>`;
    });
    let activeItem = document.querySelector('.content-botton');
    activeItem.innerHTML = innerStr;
    let itemsNature = document.querySelectorAll('.content-botton > li');
    let Dots = document.querySelectorAll('.content-dots > .liNature');
    let activeNature = 0;

    Dots.forEach((item) => {
        item.addEventListener('click', (event) => {
            console.log(event);
            Dots[activeNature].classList.remove('active');
            Dots[Number(event.target.dataset.index)].classList.add('active');
            activeNature = Number(event.target.dataset.index);
            itemsNature.forEach((key, index) => {
                key.style.transform = `translateX(-${1200 * activeNature}px)`;
            });
        });
    });
}

async function contentCity() {
    let res = await ajaxFn({
        baseUrl:
            'https://service-dmsf9bxc-1251395798.gz.apigw.tencentcs.com/release/',
        url: '/api/web/classify/getById',
        method: 'GET',
        data: {
            id: 54,
            projectId: 22,
        },
        headers: {
            'Content-type': 'application/json',
        },
    });
    console.log(res.data.w_cases);
    let content = document.querySelector('.content');
    let dataCity = res.data.w_cases;
    let titleCity = res.data;
    let innerStr = '';
    // console.log(titleCity.name);
    content.innerHTML += `<div class="content-head-city">
        <span>${titleCity.name}</span>
        <ul class="content-dots-city">
            <li class="active lis" data-indexcity = "0"></li>
            <li  class="lis" data-indexcity = "1"></li>

        </ul>
        <div class="more">
            <span>更多&gt;</span>
        </div>
    </div>
    <ul class="content-botton-city"></ul>
    `;

    dataCity.forEach((item) => {
        // console.log(item);

        let dateString = item.updatedAt;
        let dateObj = new Date(dateString);
        let year = dateObj.getFullYear();
        let month = ('0' + (dateObj.getMonth() + 1)).slice(-2);
        let day = ('0' + dateObj.getDate()).slice(-2);
        let formattedDate = year + '年' + month + '月' + day + '日';

        innerStr += `<li class="img">
        <img src="${item.cover}">
        <div class="message">
            <div class="title">${item.characterId}</div>
            <div class="phone">设备：<a href="#">${item.sketch}</a></div>
            <span>273</span>
            <div class="user">
                ${item.content.substring(
                    item.content.indexOf('<img'),
                    item.content.indexOf('>', item.content.indexOf('<img')) + 1
                )}
                <span class="name">${item.name}</span>
                <div class="time">${formattedDate}</div>
            </div>
        </div>
    </li>`;
    });
    let activeItemcity = document.querySelector('.content-botton-city');
    activeItemcity.innerHTML = innerStr;
    let items = document.querySelectorAll('.content-botton-city > li');
    let Dotscity = document.querySelectorAll('.content-dots-city > .lis');
    let activeIndex = 0;

    Dotscity.forEach((itemcity) => {
        itemcity.addEventListener('click', (event) => {
            console.log(event.target.dataset.indexcity);
            Dotscity[activeIndex].classList.remove('active');
            Dotscity[Number(event.target.dataset.indexcity)].classList.add(
                'active'
            );
            activeIndex = Number(event.target.dataset.indexcity);
            items.forEach((key, index) => {
                key.style.transform = `translateX(-${1200 * activeIndex}px)`;
            });
        });
    });
}
content();
contentCity();
